<template>
    <div>
       <van-nav-bar title="影院" ref="navbar" @click-left="handleLeft" @click-right="handleRight">
        <template #left>
        {{$store.state.cityName}}<van-icon name="arrow-down"/>
        </template>
        <template #right>
        <van-icon name="search" size="28" color="black" />
        </template>
        </van-nav-bar>
       <div class="box" :style="
       {
           height:height
       }">
            <ul>
            <li v-for="data in cinemaList" :key="data.cinemasId">
                <div class="left">
                    <div class="cinema_name">{{data.name}}</div>
                    <div class="cinema_text">{{data.address}}</div>
                    </div>

                    <div class="right">
                        <div style="color:red" class="cinema_name">￥{{data.lowPrice/100}}起</div>
                    </div>
                
            </li>
        </ul>
       </div>
    </div>
</template>
<script>

import BetterScroll from 'better-scroll'
import {mapState} from 'vuex'
export default {
    data(){
        return {
            height:'0px'
        }
    },
    computed:{
        ...mapState(['cinemaList'])
    },
    mounted() {
        // console.log(this.$refs.navbar.$el.offsetHeight);
        this.height = document.documentElement.clientHeight -this.$refs.navbar.$el.offsetHeight - document.querySelector('footer').offsetHeight +'px' 

        if(this.cinemaList.length === 0){
            this.$store.dispatch('getCinemaData',this.$store.state.cityId).then(res => {
            console.log("数据完事");
            this.$nextTick(()=>{
                new BetterScroll('.box',{
                    scrollbar:{
                        fade:true
                    }
                })
            })
        })
        }
        // http({ 
        // url:`/gateway?cityId=${this.$store.state.cityId}&ticketFlag=1&k=4594973`,
        // headers:{
        //     'X-Host':'mall.film-ticket.cinema.list'
        // }
        // }).then(res=> {
        //     console.log(res.data.data.cinemas)
        //     this.cinemasList = res.data.data.cinemas

        //     this.$nextTick(()=>{
        //         new BetterScroll('.box',{
        //             scrollbar:{
        //                 fade:true
        //             }
        //         })
        //     })
        // })
       
    },
    methods:{
        handleLeft(){
            // console.log("left");
            this.$router.push('/city')

            //清空cinemaList
        },
        handleRight(){
            this.$router.push('/cinemas/search')
        }
    }
}
</script>
<style lang="scss" scoped>
    li{
        padding: .8333rem;
        display: flex;
        justify-content: space-between;
        .left{
            width: 11.7778rem;
        }
        .cinema_name{
            font-size: 15px;
        }
        .cinema_text{
            color: #797d82;
            font-size: 12px;
            margin-top: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .box{
        height: 34.3333rem;
        overflow: hidden;
        position: relative;
        //修正滚动条的位置
    }
</style>